<template>
  <div class="page">
    <m-header title="咨询详情" :canback="Boolean(1)"></m-header>
    <div class="body">
      
      <div class="bgc">
        <div class="bgc_1"></div>
        <div class="bgc_2"></div>
      </div>
      
      <div class="content">
        
        <div class="top-box">
            <span class="title">{{langText&&langText.consultationdetails}}</span>
        </div>
        
        <div class="content_bot" v-html="details ? details.contents : ''"></div>

        <div class="img_box">
          <img  v-for="(item,index) in details.images" :key="index" :src="api+item" alt="">
        </div>
      </div>

      <!-- <div class="title">{{ details ? details.title : ''}}</div>
      <div class="detail" v-html="details ? details.contents : ''"></div> -->
    </div>
  </div>
</template>
<script>
import { Help,Base,Owner } from "@/server/server.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      details: {
        images:null,
        contents:null,
      },
      langText:null,
      id:null
    };
  },
  created () {
  },
  computed: {
    ...mapGetters(["lang",'api'])
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getlang();
    let questionId = this.$route.params.id;
    let id = questionId ? questionId : localStorage.getItem("questionId")
    localStorage.setItem("questionId", id)
    this.getNoticeDetail({ id }, data => {
      this.details = data;
      
    });
  },
  methods: {
    getlang(){
      Base.getlang().then(res=>{
        if(res.code==1){
          this.langText = Object.assign({},res.data.find)
        }else{
          mui.toast(res.msg)
        }
      })
    },
    getNoticeDetail(params, callback) {
      Owner.getNoticeDetail({id:this.id}).then(res => {
        if (res.code == 1) {
          callback(res.data);
        } else {
          mui.toast(res.msg);
        }
      });
    }
  }
};
</script>
<style  scoped>
.detail >>> p {
  color: #666;
  font-size: 28px;
}
</style>
<style lang="less" scoped>
@import '~link-less';
.page {
    background: @bg-color;
    // color: @bg-color-white;
    
    .body {
        // padding: 30px;
        word-wrap: break-word;
        background-color: @bg-color;
          .bgc{
            width: 100%;
            height: 0;
            position: fixed;
            z-index: -99;
            .bgc_1{
              width: 100%;
              // position: absolute;
              background-color: #4EB6AD;
              height: 290px;
            }
            .bgc_2{
              width: 140%;
              background-color: #4EB6AD;
              border-radius: 100%;
              height: 200px;
              margin-left: -20%;;
              margin-top: -150px;
              // bottom: 0;
            }
          }
          .content{
            background-color: #fff;
            width: 710px;
            margin: 20px;
            border-radius: 10px;
            padding: 30px 42px;
            
            .top-box{
              text-align: center;
              .title{
                width: auto;
                font-size:40px;
                font-weight:550;
                color:rgba(78,182,173,1);
                line-height:56px;
                position: relative;
                &::after{
                  content: '';
                  background:rgba(78,182,173,0.2);
                  height: 20px;
                  position: absolute;
                  bottom: 0;
                  width: 120%;
                  left: -10%;
                }
              }
            }
            .content_bot{
              margin-top: 60px;
            }
          }
    }
    .img_box{
        width: 100%;
      img{
        width: 100%;
      }
    }
}
</style>
